<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格练习</title>
    <script>
        function addEmp(){
            // 创建tr
            let trChild = document.createElement("tr");
            // 创建td
            let nameTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let operatorTd = document.createElement("td");

            // 获取用户在表单元素中输入的数据
            let name = document.getElementById("name").value;
            let salary = document.getElementById("salary").value;

            // 创建td中的文本节点
            let nameText = document.createTextNode(name);
            let salaryText = document.createTextNode(salary);

            // 创建操作中的超链接
            let aChild = document.createElement("a");
            let aText = document.createTextNode("删除");
            aChild.appendChild(aText);
            // 为超链接赋予所需要的属性
            aChild.href = "javascript:;"
            aChild.onclick = function(){
                // 可以通过this表示事件触发时,所点击的超链接是哪一个
                this.parentNode.parentNode.remove();
            };

            // 将td的标签体内容添加到对应td节点中
            nameTd.appendChild(nameText);
            salaryTd.appendChild(salaryText);
            operatorTd.appendChild(aChild);
            // 将td添加到tr中
            trChild.appendChild(nameTd);
            trChild.appendChild(salaryTd);
            trChild.appendChild(operatorTd);

            // 将tr添加到表格的最后一行
            let tableChild = document.getElementById("t");
            tableChild.appendChild(trChild);
        }
    </script>
</head>
<body>
<h1>添加员工信息</h1>
姓名:<input type="text" id="name"><br>
工资:<input type="text" id="salary"><br>
<input type="button" value="添加" onclick="addEmp()">
<hr>
<!--
    需求一:添加操作
        在表格中,初始是没有数据的,只要表头
        在表单元素中输入数据后点击添加
        会向表格中添加一行数据
    需求二:删除操作
        当用户点击了某一个删除链接后
        会从表格中删除该超链接所在的这一行数据
-->
<table id="t" border="1" style="width: 500px;background: #dddddd;">
    <tr>
        <th>姓名</th>
        <th>工资</th>
        <th>操作</th>
    </tr>
    <!--<tr>-->
        <!--<td>admin</td>-->
        <!--<td>5000.0</td>-->
        <!--<td>-->
            <!--<a href="javascript:;">删除</a>-->
        <!--</td>-->
    <!--</tr>-->
</table>
</body>
</html>